<template>
	<transition name="fade">
		<div class="notify" :style="style">
      <slot>
        <span class="content">{{content}}</span>
        <a class="btn" @click="handleClose">{{btn}}</a>
      </slot>
		</div>
	</transition>
</template>

<script>
  export default {
    props: {
      content: {
        type: String,
        default: 'xxx'
      },
      btn: {
        type: String,
        default: '关闭'
      }
    },
    computed: {
      style() {
        return {}
      }
    },
    methods: {
      handleClose(e) {
        e.preventDefault()
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
	.notify {
		display: flex;
		background-color: #303030;
		color: rgba(255, 255, 255, 1);
		align-items: center;
		padding: 20px;
		position: fixed;
		min-width: 280px;
		box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
			0px 6px 10px 0px rgba(0, 0, 0, 0.8);
		flex-wrap: wrap;
		transition: all 0.3s;

		.content {
			padding: 0;
		}

		.btn {
			color: #ff4081;
			padding-left: 24px;
			margin-left: auto;
			cursor: pointer;
		}
	}
</style>
